<template>
  <div id="visual">
    <div class="vissual-box">
      <div class="visual-left">
        <div class="top">
          <div class="item">
            <p class="name">股票池来源</p>
            <el-select
              v-model="sourceVal"
              placeholder="请选择"
              @change="selectTemplate"
            >
              <el-option
                v-for="item in stockSource"
                :key="item.val"
                :label="item.name"
                :value="item.val"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item left">
            <p class="name">X轴</p>
            <el-select
              class="el-input_xy"
              v-model="send.pageX"
              placeholder="请选择"
              @change="selectValue($event, 1)"
            >
              <el-option
                v-for="item in pageXList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
            <div class="rotation">
              <div class="circle" @click="turn"></div>
            </div>
          </div>
          <div class="item left">
            <p class="name">Y轴</p>
            <el-select
              class="el-input_xy"
              v-model="send.pageY"
              placeholder="请选择"
              @change="selectValue($event, 2)"
            >
              <el-option
                v-for="item in pageYList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item">
            <p class="name">气泡大小</p>
            <el-select
              v-model="send.bubble"
              placeholder="请选择"
              @change="selectValue($event, 3)"
            >
              <el-option
                v-for="item in bubbleList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
          </div>
          <div class="item">
            <p class="name">气泡颜色</p>
            <el-select
              v-model="send.bubbleColor"
              placeholder="请选择"
              @change="selectValue($event, 4)"
            >
              <el-option
                v-for="item in bubbleColorList"
                :key="item.id"
                :label="item.fieldSname"
                :value="item.fieldName"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="bottom">
          <p class="bottom-title">您可通过以下功能导入数据到可视化选股中:</p>
          <p>私募地图</p>
          <p>高管交易榜</p>
          <p>员工持股</p>
          <p>三星高照</p>
          <p>外资股票池</p>
          <!-- <p>雷霆策略</p> -->
          <p>指标选股</p>
          <p>战法选股</p>
          <p>形态选股</p>
          <p>多信号共振</p>
          <p>驭龙AI平台</p>
        </div>
      </div>
      <div class="visual-right">
        <div class="title">
          <span class="coord">X轴坐标</span>
          <el-input-number
            @change="numberChange1"
            v-model="valueX[0]"
            :controls="false"
          ></el-input-number>
          <span class="line">--</span>
          <el-input-number
            @change="numberChange1"
            v-model="valueX[1]"
            :controls="false"
          ></el-input-number>

          <span class="coord">Y轴坐标</span>

          <el-input-number
            @change="numberChange2"
            v-model="valueY[0]"
            :controls="false"
          ></el-input-number>
          <span class="line">--</span>

          <el-input-number
            @change="numberChange2"
            v-model="valueY[1]"
            :controls="false"
          ></el-input-number>
          <span class="reset" @click="reset"
            ><i class="el-icon-refresh-left"></i>恢复默认</span
          >
        </div>
        <div class="slider-rows">
          <el-slider
            range
            :step="step"
            v-model="slideX"
            tooltip-class="ttc"
            :max="maxminX[1]"
            :min="maxminX[0]"
            @change="sliderChangeX"
          ></el-slider>
        </div>
        <div class="slider-column">
          <el-slider
            v-model="slideY"
            range
            :step="step"
            @change="sliderChangeY"
            :max="maxminY[1]"
            :min="maxminY[0]"
            vertical
            height="580px"
          >
          </el-slider>
        </div>
        <div
          id="container"
          style="height: 684px; min-width: 310px; margin-right: 90px"
        ></div>
      </div>
    </div>
    <div class="visual-footer">
      <div class="color">
        <div
          class="color-item"
          :style="{ background: item.color }"
          v-for="item in colorBlock"
          :key="item.num"
        >
          {{ item.num }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryOption, queryJson } from "../api/index";
import { blockColor, colorType } from "../script/blockColor";
import * as Highcharts from "highcharts";
import { dataFormat, unitFormat } from "../script/util";
import { stockSource } from "../script/dataInit";
import HighStock from "highcharts/highstock";
import highchartsMore from "highcharts/highcharts-more";
highchartsMore(Highcharts);
var chart;
export default {
  data() {
    return {
      dataList: [],
      stockSource: stockSource, //股票池来源
      sourceVal: "poolTSZB_UP", //来源值
      value: "",
      clientData: "", //客户端导入数据
      step: 0.01,
      slideX: [0, 0], //rows滑块
      slideY: [0, 0], //column滑块
      maxminX: [],
      maxminY: [],
      block: [], //行业版块
      indexList: [], //指数列表
      flowVal: "",
      colorBlock: [], //底部色值块
      titleX: "",
      titleY: "",
      input: "",
      send: {
        pageX: "",
        pageY: "",
        bubble: "",
        bubbleColor: "",
      },
      pageXList: [], //X轴
      pageYList: [], // Y轴
      bubbleList: [], //气泡大小
      bubbleColorList: [], //气泡颜色
    };
  },
  computed: {
    valueX() {
      return JSON.parse(JSON.stringify(this.slideX));
    },
    valueY() {
      return JSON.parse(JSON.stringify(this.slideY));
    },
  },
  async mounted() {
    window.remoteCallback = (data) => {
      this.clientData = JSON.parse(window.atob(data));
      this.stockSource.push({ name: "导入数据", val: "import_data" });
      this.sourceVal = "import_data";
      this.selectTemplate();
    };
    await queryOption().then((back) => {
      if (back.status == 1) {
        let res = back.data;
        this.pageXList = res.data.filter((item) => item.showX === 1);
        this.pageYList = res.data.filter((item) => item.showY === 1);
        this.bubbleList = res.data.filter((item) => item.useBubble === 1);
        this.bubbleColorList = res.data.filter(
          (item) => item.useBubbleColor === 1
        );
        this.bubbleList.unshift({ id: 1, fieldName: "", fieldSname: "常规" });
        this.bubbleColorList.unshift({
          id: 1,
          fieldName: "",
          fieldSname: "常规",
        });
      }
      if (!this.clientData) {
        this.selectTemplate();
      }
    });
  },
  methods: {
    turn() {
      const x = this.send.pageX;
      this.send.pageX = this.send.pageY;
      this.send.pageY = x;
      this.queryJson();
    },
    reset() {
      this.slideX = this.maxminX;
      this.slideY = this.maxminY;
      chart.zoomOut();
    },
    numberChange1() {
      this.slideX = this.valueX;
      chart.xAxis[0].setExtremes(this.slideX[0], this.slideX[1]);
    },
    numberChange2() {
      this.slideY = this.valueY;
      chart.yAxis[0].setExtremes(this.slideY[0], this.slideY[1]);
    },
    sliderChangeY() {
      chart.yAxis[0].setExtremes(this.slideY[0], this.slideY[1]);
    },
    sliderChangeX() {
      chart.xAxis[0].setExtremes(this.slideX[0], this.slideX[1]);
    },
    selectValue(val, type) {
      switch (type) {
        case 1:
          this.send.pageX = val;
          break;
        case 2:
          this.send.pageY = val;
          break;
        case 3:
          this.send.bubble = val;
          break;
        case 4:
          this.send.bubbleColor = val;
          break;
      }
      this.queryJson();
      this.reset();
    },
    selectType(val) {
      this.queryJson();
      this.reset();
    },
    selectTemplate() {
      this.send = {
        pageX: "priceChgWeek", //1周涨跌幅
        pageY: "priceChgMonth", //一月涨跌幅
        bubble: "flowVal", //流通市值
        bubbleColor: "tradeVolume", //成交量
      };
      this.queryJson();
    },
    setExtremes(arr) {
      chart.yAxis[0].setExtremes(arr[0], arr[1]);
      chart.xAxis[0].setExtremes(2, 4);
    },
    async queryJson() {
      this.colorBlock = blockColor(this.send.bubbleColor);
      var newObj = {};
      var newArr = [
        "flowVal",
        "priceChg",
        "marketVal",
        "turnoverRatio",
        "priceNow",
      ];
      var obj = Object.values(this.send);
      for (let i = 0; i < obj.length; i++) {
        if (obj[i]) {
          newObj[obj[i]] = "[-99999999999,]";
          newArr.push(obj[i]);
        }
      }
      if (this.sourceVal != "import_data") {
        newObj.scope_poolTypes = this.sourceVal;
      }
      if (this.clientData && this.sourceVal == "import_data") {
        newObj.securityId = this.clientData.data.stockIds;
      }
      const showField = newArr.join(",");
      await queryJson({ ...newObj, showField: showField }).then((back) => {
        if (back.status == 1) {
          let res = back;
          var arrList = res.data.resultList.map((item) =>
            item[this.send.pageX].toFixed(2)
          );
          var arrLists = res.data.resultList.map((item) =>
            item[this.send.pageY].toFixed(2)
          );
          var a = Math.min(...arrList);
          var b = Math.max(...arrList);
          var c = Math.min(...arrLists);
          var d = Math.max(...arrLists);
          this.$set(this.slideX, 0, a);
          this.$set(this.slideX, 1, b);
          this.$set(this.slideY, 0, c);
          this.$set(this.slideY, 1, d);
          this.maxminY = this.slideY;
          this.maxminX = this.slideX;
          res.data.fieldList.map((item) => {
            if (item.fieldName == this.send.pageX) {
              this.titleX = item.fieldDesc;
            }
            if (item.fieldName == this.send.pageY) {
              this.titleY = item.fieldDesc;
            }
          });
          var zList = [];
          this.dataList = res.data.resultList.map((item) => {
            item.name = item.stockName;
            item.x = item[this.send.pageX];
            item.y = item[this.send.pageY];
            item.z = item[this.send.bubble];
            item.ltsz = unitFormat(item.flowVal);
            item.zdf = unitFormat(item.priceChg);
            item.zsz = unitFormat(item.marketVal);
            item.hsl = unitFormat(item.turnoverRatio);
            item.zx = unitFormat(item.priceNow);
            item.fontColor = item.priceChg > 0 ? "red" : "green";
            zList.push(item.z);
            item.title = item.stockName;
            item.color = colorType(
              this.send.bubbleColor,
              dataFormat(item[this.send.bubbleColor])
            );
            return item;
          });
          this.drow();
        }
      });
    },
    drow() {
      chart = Highcharts.chart("container", {
        chart: {
          type: "bubble",
          spacing: [10, 10, 10, 10],
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        title: {
          text: null,
        },
        xAxis: {
          title: {
            text: this.titleX,
            margin: 10,
            rotation: 0,
          },
          labels: {
            zIndex: 1,
            formatter: function () {
              var value = dataFormat(this.value);
              if (this.value > 0) {
                return '<div style="color:#EA2827">' + value + "</div>";
              } else if (this.value == 0) {
                return '<div style="color:#BCBFC4">' + value + "</div>";
              } else {
                return '<div style="color:#61C869">' + value + "</div>";
              }
            },
          },
        },
        yAxis: {
          startOnTick: false,
          endOnTick: false,
          title: {
            text: this.titleY,
            align: "middle",
            y: -10,
          },
          labels: {
            formatter: function () {
              var value = dataFormat(this.value);
              if (this.value > 0) {
                return '<div style="color:#EA2827">' + value + "</div>";
              } else if (this.value == 0) {
                return '<div style="color:#BCBFC4">' + value + "</div>";
              } else {
                return '<div style="color:#61C869">' + value + "</div>";
              }
            },
          },
          useHTML: true,
          maxPadding: 0.2,
        },
        zAxis: {},
        tooltip: {
          useHTML: true,
          followPointer: true,
          headerFormat: "<table>",
          pointFormat:
            '<tr><th colspan="3"><span style="font-size:16px;color:#F4F636;font-weight:bold">{point.stockCode}&nbsp;&nbsp;{point.title}</span></th></tr>' +
            '<tr><th class="th-color">最新:</th><td class="{point.fontColor}" >{point.zx}</td></tr>' +
            '<tr><th class="th-color">涨跌幅:</th><td class="{point.fontColor}">{point.zdf}%</td></tr>' +
            '<tr><th class="th-color">流通市值:</th><td style="color:#FF8A00">{point.ltsz}</td></tr>' +
            '<tr><th class="th-color">总市值:</th><td style="color:#FF8A00">{point.zsz}</td></tr>' +
            '<tr><th class="th-color">换手率:</th><td style="color:#FFFFFF">{point.hsl}%</td></tr>',
          footerFormat: "</table>",
        },
        plotOptions: {
          bubble: { maxSize: "120" },
          series: {
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              // allowOverlap: true, //设置允许重叠
              format: "{point.name}",
            },
            point: {
              events: {
                click: (e) => {
                  const codeType = String(e.point.securityId).substr(0, 1);
                  const type = codeType == 2 ? "0" : "1";
                  window.prompt(
                    "",
                    `up://["open.stock",${Date.now()},{"type":"可视化选股","setcode":"${type}","code":"${
                      e.point.stockCode
                    }"}]`
                  );
                },
              },
            },
          },
        },
        series: [{ data: this.dataList }],
      });
    },
  },
};
// 主题颜色
Highcharts.theme = {
  chart: {
    backgroundColor: "#090910",
    borderColor: "#1E2127",
  },
  tooltip: {
    backgroundColor: "#1D202C",
    borderColor: "#414663",
    style: {
      color: "#F0F0F0",
    },
  },
  plotOptions: {
    series: {
      dataLabels: {
        style: {
          fontWeight: "400",
          fontSize: "13px",
          color: "#fff",
          textOutline: "none",
        },
      },
    },
  },
};
Highcharts.setOptions(Highcharts.theme);
</script>
<style lang="scss" scoped>
@import "../style/index.scss";
</style>
<style lang="scss">
.el-tooltip__popper.is-dark {
  color: #bcbfc4;
  height: 8px;
  line-height: 8px;
  font-size: 15px;
  text-align: center;
  background: linear-gradient(180deg, rgba(70, 76, 98, 1), rgba(28, 29, 33, 1));
  border: 1px solid rgba(91, 91, 109, 1);
  box-shadow: 1px 0px 1px 0px rgba(136, 161, 136, 0.35),
    -1px 0px 1px 0px rgba(0, 0, 0, 0.74),
    -1px 0px 0px 0px rgba(136, 161, 136, 0.35);
  border-radius: 2px;
}

.el-input__inner {
  color: #fff;
  text-align: center;
  font-size: 15px;
  width: 256px;
  height: 30px;
  line-height: 30px;
  background: rgba(39, 40, 46, 1);
  border: 1px solid rgba(39, 40, 46, 1);
  border-radius: 0;
}
.el-input_xy .el-input__inner {
  width: 216px !important;
}
.title .el-input-number {
  width: 71px;
  line-height: 28px;
}
.title .el-input {
  width: 71px;
  height: 28px;
}
.title .el-input__inner {
  width: 77px;
  height: 28px;
  line-height: 28px;
  background: rgba(9, 9, 16, 1);
  border: 1px solid rgba(65, 67, 73, 1);
  box-shadow: 0px 2px 1px 0px rgba(5, 6, 12, 0.5);
  border-radius: 4px;
}

.el-select-dropdown {
  text-align: center;
  color: #bcbfc4;
  font-size: 15px;
  border-radius: 0;
  width: 100px;
  background: rgba(28, 29, 33, 1);
  border: 1px solid rgba(53, 73, 124, 1);
}

.el-select .el-input .el-select__caret {
  color: #4f505e;
  font-size: 17px;
}
.el-icon-arrow-up:before {
  content: "\e78f";
}

.el-select-dropdown__item {
  font-size: 15px;
  height: 26px;
  line-height: 26px;
}
.el-select-dropdown__item.selected {
  color: #fff;
  background-color: #1d202c;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #fff;
  background-color: #1d202c;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
  display: none !important;
}
.slider-rows .el-slider__runway {
  height: 10px;
  margin: 10px 0;
  background: rgba(9, 9, 16, 1);
  box-shadow: 0px -1px 3px 0px rgba(98, 146, 98, 0.35),
    0px 2px 4px 0px rgba(0, 0, 0, 0.74),
    0px 1px 1px 0px rgba(147, 187, 147, 0.35);
  border-radius: 5px;
}
.slider-column .el-slider__runway {
  width: 50px;
  height: 580px;
  background: rgba(9, 9, 16, 1);
  box-shadow: -2px 0px 4px 0px rgba(98, 146, 98, 0.35),
    -1px 0px 1px 0px rgba(0, 0, 0, 0.74),
    1px 0px 1px 0px rgba(147, 187, 147, 0.35);
  border-radius: 5px;
}

.highcharts-xaxis-grid .highcharts-grid-line {
  stroke-width: 1px;
  stroke: #1e2127;
}
.highcharts-xaxis .highcharts-tick {
  stroke-width: 1px;
  stroke: none;
}
.highcharts-yaxis-grid .highcharts-grid-line {
  stroke-width: 1px;
  stroke: #1e2127;
}
.highcharts-axis-line {
  stroke-width: 1px;
  stroke: #1e2127;
}

.highcharts-minor-grid-line {
  stroke-dasharray: 10, 10;
}
.highcharts-plot-border {
  stroke-width: 1px;
  stroke: #1e2127;
}
.highcharts-background {
  stroke-width: 0;
}

.slider-rows .el-slider__button {
  width: 34px;
  height: 20px;
  background: url($PIC_URL + "/tlbypcWeb/visualStock/hk_heng.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 0;
  border: 0;
}
.slider-column .el-slider__button {
  width: 20px;
  height: 34px;
  background: url($PIC_URL + "/tlbypcWeb/visualStock/hk_shu.png") no-repeat;
  background-size: 100%;
  border-radius: 0;
  border: 0;
}
.slider-rows .el-slider__bar {
  background: linear-gradient(0deg, #4467d5, #79a5f2);
  box-shadow: 0px -1px 1px 0px rgba(98, 146, 98, 0.35),
    0px -2px 3px 0px rgba(0, 0, 0, 0.67),
    0px 3px 4px 0px rgba(147, 187, 147, 0.35);
}
.slider-column .el-slider__bar {
  background: linear-gradient(-90deg, #4467d5, #79a5f2);
  box-shadow: -1px 0px 1px 0px rgba(98, 146, 98, 0.35),
    -2px 0px 4px 0px rgba(0, 0, 0, 0.74),
    3px 0px 4px 0px rgba(147, 187, 147, 0.35);
}

.red {
  color: #ea2827;
}
.green {
  color: #61c869;
}
.th-color {
  color: #e6e6e6;
  font-size: 15px;
  line-height: 16px;
  padding: 4px 0;
}
table {
  width: 200px;
}
table td {
  font-size: 15px;
  text-align: right;
}
path.highcharts-point {
  stroke-width: 0;
}

path.highcharts-label-box.highcharts-tooltip-box {
  stroke-width: 1;
}
</style>
